<template>
  <el-card>
    <el-row>
      <el-form :inline="true" :model="queryParm" size="default" label-width="68px" label-position="right">
        <el-form-item label="字典名称">
          <el-input v-model="queryParm.dictName" placeholder="请输入字典名称"/>
        </el-form-item>
        <el-form-item label="字典类型">
          <el-input v-model="queryParm.dictType" placeholder="请输入字典类型"/>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryParm.state" placeholder="字典状态">
            <el-option label="正常" value="0"/>
            <el-option label="停用" value="1"/>
          </el-select>
        </el-form-item>

        <el-form-item size="small">
          <el-button type="primary" @click="getList()" v-auth="'system-dict-type-query'">查询</el-button>
          <el-button type="default" @click="onResetQuery">重置</el-button>
        </el-form-item>
        <!-- 此处多加一个表单标签，防止样式出现层次不齐，组件BUG。暂没找到解决办法 -->
        <el-form-item>
        </el-form-item>

      </el-form>
    </el-row>
    <el-row>
      <el-button size="small" type="success" @click="btnAdd" v-auth="'system-dict-type-add'">
        <el-icon>
          <ele-FolderAdd/>
        </el-icon>
        添加
      </el-button>
      <el-button size="small" type="primary" :disabled="select.sign" @click="selectUpdateBtn" v-auth="'system-dict-type-update'">
        <el-icon>
          <ele-EditPen/>
        </el-icon>修改</el-button>
      <el-popconfirm title="确定删除吗？" @confirm="selectDelete">
        <template #reference>
          <el-button size="small" type="danger" :disabled="select.ids.length<=0"  v-auth="'system-dict-type-delete'"><el-icon>
            <ele-Delete/>
          </el-icon>删除</el-button>
        </template>
      </el-popconfirm>
    </el-row>
    <el-row>
      <el-table :data="data.pageList"
                v-loading="loding"
                @expand-change="dictExpand"
                :expand-row-keys="currentExpandRows"
                row-key="dictId"
                @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"/>
        <el-table-column type="expand">
          <template #default="scope">
            <div style="margin-left: 50px">
              <transition name="el-zoom-in-top">
              <dict-data ref="dataRef"/>
              </transition>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="字典编号" prop="dictId"/>
        <el-table-column align="center" label="字典名称" prop="dictName"/>
        <el-table-column align="center" label="字典类型" prop="dictType"/>
        <el-table-column align="center" label="状态">
          <template #default="scope">
            <el-tag size="small" class="ml-2" type="success" v-if="scope.row.state=='0'">正常</el-tag>
            <el-tag size="small" class="ml-2" type="warning" v-else>停用</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="备注" prop="remark"/>
        <el-table-column align="center" label="创建时间" prop="createTime"/>
        <el-table-column align="center" label="操作" v-auths="['system-dict-type-update','system-dict-type-delete']">
          <template #default="scope">
                <el-link type="primary" title="修改" @click="signUpdateBtn(scope.row)" v-auth="'system-dict-type-update'">
                  <el-icon>
                    <ele-EditPen/>
                  </el-icon>
                </el-link>
                <el-popconfirm title="确定删除吗？" @confirm="deleteRows(scope.row)">
                  <template #reference>
                    <el-link type="danger" title="删除" class="ml10"  v-auth="'system-dict-type-delete'">
                      <el-icon>
                        <ele-Delete/>
                      </el-icon>
                    </el-link>
                  </template>
                </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
        <el-pagination
            class="mt15"
            style="justify-content: flex-end;"
            v-model:currentPage="queryParm.current"
            v-model:page-size="queryParm.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            small
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="getList"
            @current-change="getList"
        />
    </el-row>
    <edit-form ref="editFormCom" @ok="getList"/>
  </el-card>


</template>

<script setup>

import {queryList, deleteTypes} from "/@/api/system/dict";
import EditForm from './EditForm.vue'
import DictData from './DictData.vue'
import {ElMessage} from "element-plus";

const queryParm = reactive({
  current: 1,
  pageSize: 10,
  dictName: undefined,
  dictType: undefined,
  state: '0'
})
// 页面数据
const data = reactive({
  pageList: []
})


const select = reactive({
  sign: true,
  ids: []
})
const handleSelectionChange = (node) => {
  select.ids = node
  if (select.ids.length == 1) {
    select.sign = false
  } else {
    select.sign = true
  }
}
// 批量删除
const selectDelete = () => {
  let arr = []
  select.ids.forEach(item => {
    arr.push(item.dictId)
  })
  deleteTypes(arr).then(res => {
    ElMessage.success(res.msg)
    getList()
  })
}

// 当前展开
const currentExpandRows = ref([])
const editFormCom = ref();
const btnAdd = () => {
  editFormCom.value.openDialog()
}

const selectUpdateBtn = () => {
  if (select.ids[0]) {
    editFormCom.value.openDialog(select.ids[0])
  }
}
const signUpdateBtn = (node) => {
  editFormCom.value.openDialog(node)
}

const deleteRows = (node) => {
  deleteTypes(node.dictId).then(res => {
    ElMessage.success(res.msg)
    getList()
  })
}

const loding= ref(true)
const total = ref(0)
const getList = () => {
  loding.value= true
  queryList(queryParm).then(res => {
    data.pageList = res.data.rows
    total.value= res.data.pageTotal
    loding.value= false
  })
}

const {proxy} = getCurrentInstance()
const dictExpand = (expandedRows, expanded) => {
  if (expanded.length > 0) {
    currentExpandRows.value = [expandedRows.dictId]
    setTimeout(function () {
      proxy.$refs.dataRef.getDataList(expandedRows.dictType)
    }, 100)
  } else {
    currentExpandRows.value = []
  }
}

// 重置搜索表单
const onResetQuery = () => {

  queryParm.current = 1
  queryParm.pageSize = 10
  queryParm.dictName = undefined
  queryParm.dictType = undefined
  queryParm.state = '0'
  currentExpandRows.value = []
  getList()
}

onBeforeMount(() => {
  getList()
})

</script>

<style scoped>

</style>
